<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>栏目管理</title>
	<meta name="decorator" content="default"/>
	<%@include file="/WEB-INF/views/include/treeview.jsp" %>
	<style type="text/css">
		.ztree {overflow:auto;margin:0;_margin-top:10px;padding:10px 0 0 10px;}
	</style>
</head>
<body>
	<sys:message content="${message}"/>
	<div id="content" class="row-fluid">
		<div id="left" class="accordion-group">
			<div class="accordion-heading">
		    	<a class="accordion-toggle">网站栏目
		    		<input type="button" value="排序" onclick="sortTreeNodes()">
		    		<i class="icon-refresh pull-right" onclick="refreshTree();"></i>
		    		
		    	</a>
		    </div>
		    <!-- <div style="position:absolute;right:8px;top:5px;cursor:pointer;" onclick="search();">
				<i class="icon-search"></i><label style="display: none;" id="txt">搜索</label>
			</div> -->
		    <!-- <div id="search" class="form-search hide" style="padding: 10px 0px 0px 13px; display: block;">
				<label for="key" class="control-label" style="padding:5px 5px 3px 0;">关键字：</label>
				<input class="empty" id="key" name="key" maxlength="50" style="width:80px;" type="text">
				<button class="btn" id="btn" onclick="searchNode()">搜索</button>
			</div> -->
			<div id="ztree" class="ztree"></div>
		</div>
		<div id="openClose" class="close">&nbsp;</div>
		<div id="right">
			<%-- <iframe id="officeContent" src="${ctx}/cms/category/list" width="100%" height="91%" frameborder="0"></iframe>
			 --%>
			<iframe id="categoryContent" name="categoryContent" src="${ctx}/cms/category/form" width="100%" height="91%" frameborder="0"></iframe>
			
		</div>
	</div>
	<div id="dialog" title="栏目排序" style="display: none;">
	  <div style="height: 10px;"></div>
	  <form id="sortListForm" method="post">
		  <table id="sortListTable" class="table table-striped table-bordered table-condensed">
		  	<tr>
		  		<th style="text-align:center;" onclick="toggleCheckBox('checkboxName',this)">
		  			<input type="checkbox" checkboxName="sort" name="table_form_checkbox_all" value="">
		  		</th>
		  		<th style="text-align:center;">序号</th>
		  		<th style="text-align:center;">栏目名称</th>
		  		<td rowspan="100%" style="width: 100px;vertical-align: top;padding-top: 10px;padding-left: 10px;">
		  			<input  class="btn btn-success" style="margin: 3px;" type="button" value="置顶" onclick="sortRows('top')"/>
		  			<input  class="btn btn-success" style="margin: 3px;" type="button" value="向上" onclick="sortRows('up')"/>
		  			<input  class="btn btn-success" style="margin: 3px;" type="button" value="向下" onclick="sortRows('down')"/>
		  			<input  class="btn btn-success" style="margin: 3px;" type="button" value="置底" onclick="sortRows('bottom')"/>
		  		</td>
		  	</tr>
		  	<tr name="template" style="display: none;">
				<td style="text-align:center;" >
					<input type="checkbox" name="sortTemplate" attrname="sort" value="">
					<input type="hidden" attrname="id" value=""/>
				</td>
				<td style="text-align:center;">
					<span attrname="number">1</span>
				</td>
				<td attrname="name">栏目1</td>
			</tr>
		  </table>
	  </form>
	</div>
	<script type="text/javascript">
	
		var treeId = 'ztree';
		var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},
			callback:{onClick:function(event, treeId, treeNode){
					var id = treeNode.id == '0' ? '' :treeNode.id;
					//$('#officeContent').attr("src","${ctx}/cms/category/list?category.parentid="+id+"&category.parentname="+treeNode.name);
					
					var framePage = window.frames["categoryContent"].document;
					var currentTab = $("li.active", framePage)[0];
					if(currentTab!=null&&currentTab.id=="categorylist"){
						$('#categoryContent').attr("src","${ctx}/cms/category/list?category.parentid="+id+"&category.parentname="+treeNode.name);
						
					}else{
						var btnSubmit = $("#btnSubmit", framePage);
						var flag = false;
						//debugger;
						if(btnSubmit.attr('disabled')!="disabled"){
							flag = confirmx('要取消当前修改操作？',function(){
								$('#categoryContent').attr("src","${ctx}/cms/category/form?id="+id);
							});
							if(flag){
								return false;
							}
						}else{
							$('#categoryContent').attr("src","${ctx}/cms/category/form?id="+id);
						}
					}
				}
			}
		};
		
		function refreshTree(){
			$.getJSON("${ctx}/cms/category/treeData",function(data){
				var treeMode = $.fn.zTree.init($("#"+treeId), setting, data);
				//treeMode.expandAll(true);
				var treeObj = $.fn.zTree.getZTreeObj(treeId);
				var nodes = treeObj.getNodes();
				//debugger;
				if (nodes.length>0) {
					//nodes[0].checked = true;
					treeObj.selectNode(nodes[0],true);
					var childrens = nodes[0].children;
					treeObj.expandNode(childrens[0], true, false, true);
					
				}
			});
		}
		refreshTree();
		 
		var leftWidth = 180; // 左侧窗口大小
		var htmlObj = $("html"), mainObj = $("#main");
		var frameObj = $("#left, #openClose, #right, #right iframe");
		function wSize(){
			var strs = getWindowSize().toString().split(",");
			htmlObj.css({"overflow-x":"hidden", "overflow-y":"hidden"});
			mainObj.css("width","auto");
			frameObj.height(strs[0] - 5);
			var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
			$("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
			$(".ztree").width(leftWidth - 10).height(frameObj.height() - 46);
		}
		
		function getSelectNode(){
			var treeObj = $.fn.zTree.getZTreeObj(treeId);
			return treeObj.getSelectedNodes();
		}
		
		function loadSortTable(datas){
			var table = jQuery("#sortListTable");
			var trTemplate = jQuery("tr[name='template']",table);
			if(datas!=null&&datas.length>0){
				for(var i=0; i<datas.length ; i++){
					var data = datas[i];
					var trObj = trTemplate.clone();
					table.append(trObj);
					jQuery('[attrname="number"]',trObj).html(i+1);
					jQuery('[attrname="sort"]',trObj).html(data.sort);
					jQuery('[attrname="sort"]',trObj).attr('name','sort');
					jQuery('[attrname="id"]',trObj).val(data.id);
					jQuery('[attrname="name"]',trObj).html(data.name);
					jQuery(trObj).css('display',''); 
					
					trObj.attr('name','tr'+i);
				}
			}
			
		}
		function sortTreeNodes(){
			var treeObj = $.fn.zTree.getZTreeObj(treeId);
			var nodes = treeObj.getSelectedNodes();
			var parentNode = nodes[0];
			if(parentNode == null || parentNode.isParent != true){
				alertx("请选择一个包含下级的栏目！");
				return ;
			}
			var childrenNodes = parentNode.children;
			var datas = [];
			for(var i=0; i<childrenNodes.length ; i++){
				var childrenNode = childrenNodes[i];
				var data = {};
				data.id = childrenNode.id;
				data.name = childrenNode.name;
				data.sort = i+1;
				datas.push(data);
			}
			var openUrl = "${ctx}/cms/category/form";
			var dialogOpts = { 
					width : 400,
					height: "auto",
					modal: false,
					buttons: {       
						"Ok": function() {
							updateDBSort();
							var table = jQuery("#sortListTable");
							jQuery('tr[name*="tr"]',table).remove();
							$( this ).dialog( "close" );
							
						} , 
						"Cancel": function() {
							$( this ).dialog( "close" );
						}    
					} 
			}; 
			
			loadSortTable(datas);
			$( "#dialog" ).dialog(dialogOpts);
		}
		
		//更新数据库
		function updateDBSort(){
			var datas = getRowsData();
			var dataStr = JsonToString(datas);
			var urls = '${ctx}/cms/category/ajaxUpdateSort';
			var data = {datas : dataStr}
			var info = ajaxSave(urls,data);
			if(info == null || info == ''){
				alertx("排序失败");
			}else{
				alertx(info);
				refreshTree();
			}
		}
		
		//获取数据
		function getRowsData(){
			var table = jQuery("#sortListTable");
			var checkboxs = jQuery('input[name="sort"]',table);
			var datas = [];
			if(checkboxs!=null&&checkboxs.length>0){
				for(var i=0; i<checkboxs.length ; i++){
					var checkbox = checkboxs[i];
					var trObj = jQuery(checkbox).parents('tr')[0];
					jQuery('[attrname="number"]',trObj).html(i+1);
					jQuery('[attrname="sort"]',trObj).val(i+1);
					jQuery(trObj).attr('name','tr'+i);
					var data = {};
					data.id = jQuery('[attrname="id"]',trObj).val();
					data.sort = jQuery('[attrname="sort"]',trObj).val();
					datas.push(data);
				}
			}
			return datas;
		}
		
		//行排序
		function sortRows(moveDirect){
			if(moveDirect!=null){
				var table = jQuery("#sortListTable");
				var checkboxs = jQuery('input[name="sort"]:checked',table);
				if(checkboxs.length == 0){
					alertx("请选择至少一个的栏目！");
					return ;
				}
				switch(moveDirect){
				case 'up' :
					for(var i=0; i<checkboxs.length ; i++){
						var curentTr = jQuery(checkboxs[i]).parents('tr')[0];
						var preTr = jQuery(curentTr).prev('tr');
						jQuery(curentTr).insertBefore(preTr);
					}
					break;
				case 'down' :
					for(var i=0; i<checkboxs.length ; i++){
						var curentTr = jQuery(checkboxs[checkboxs.length-1-i]).parents('tr')[0];
						var nextTr = jQuery(curentTr).next('tr');
						jQuery(curentTr).insertAfter(nextTr);
					}
					break;	
				case 'top' :
					for(var i=0; i<checkboxs.length ; i++){
						var curentTr = jQuery(checkboxs[checkboxs.length-1-i]).parents('tr')[0];
						var trTemplate = jQuery("tr[name='template']",table);
						jQuery(curentTr).insertAfter(trTemplate);
					}
					break;
				case 'bottom' :
					for(var i=0; i<checkboxs.length ; i++){
						var curentTr = jQuery(checkboxs[checkboxs.length-1-i]).parents('tr')[0];
						jQuery(curentTr).parent().append(curentTr);
					}
					break;	
				}
				updateSortNumber();
			}
		}
		
		//更新序号
		function updateSortNumber(){
			var table = jQuery("#sortListTable");
			var checkboxs = jQuery('input[name="sort"]',table);
			if(checkboxs!=null&&checkboxs.length>0){
				for(var i=0; i<checkboxs.length ; i++){
					var checkbox = checkboxs[i];
					var trObj = jQuery(checkbox).parents('tr')[0];
					jQuery('[attrname="number"]',trObj).html(i+1);
					jQuery('[attrname="sort"]',trObj).val(i+1);
					jQuery(trObj).attr('name','tr'+i);
				}
			}
		}
	</script>
	<script src="${ctxStatic}/common/wsize.min.js" type="text/javascript"></script>
</body>
</html>